<template>
   <div>
            <!-- 标题 -->
            <div  class="title flex">
               <input id="titleInput" v-model="title" @input='getTitleLength($event.target)' maxlength="30"
                  placeholder="标题有趣会有更多赞哦" autocomplete="off"/>
               <p>{{30-titleLength}}</p>
            </div>
            <!-- 分类 -->         
            <el-select v-model="type" placeholder="请选择" class="select">
                  <el-option
                     v-for="item in ArticleTypeData"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
                  </el-option>
               </el-select>
            <!-- 封面 -->
            <div class="cover flex">
                <div class="produce">封面</div>
                <!-- 功能 -->
                <div class="fun">
                     <el-tooltip v-for="item in funData" :key="item.id" class="item funOne flex"  
                                effect="dark" :content="item.label" placement="bottom">
                             <font-awesome-icon :icon="item.icon" class="icon" @click="item.click"/>
                     </el-tooltip>
                </div>
                
                <!-- 图片显示 -->
                <img :src="cover" class="coverImage" v-if="cover">
                <!-- 上传框 -->
                <div v-else class="coverImage flex upload"> 
                 <div class="box flex">
                   <i class="el-icon-upload uploadIcon" @click="upload"></i>
                   <div class="uploadText">上传图片大小不能超过5M</div>
                   <input type="file" @change="onChange" ref="coverImage" style="display:none">
                 </div>
                </div>

             
          </div>
           
           <!-- 发布 -->
           <el-button icon="el-icon-position" id="publicButton" @click="publish_()">发布</el-button>
           
          <!-- 剪切 -->
         <Cropper :croperImg="croperImg" :cropperShow="cropperShow" :fileinfo="fileinfo" :showDown="showDown" :suceessUpload="suceessUpload"/>
         
   </div>
</template>
<script>
import Cropper from '@/components/Package/Cropper/Cropper.vue'
import { mapState,mapActions,mapMutations} from 'vuex'
import common from "@/common/global"
  export default 
  {
  components: { Cropper },
     name :'', 
     computed:{
       ...mapState('Init',['ArticleTypeData']), //类型
       ...mapState('Article',['PublishData','PublishType']),
       ...mapState('Login',['User']),
     },
     data() {
      return {
          titleLength:0,
          title:'',
          type:1,
          cover:null,
          croperImg:'',
          cropperShow:false,
          fileinfo:{},
          funData:[
            {id:1,label:'刷新文章封面',icon:'arrow-rotate-right',click:this.refresh},
            // {id:2,label:'查看已上传图片',icon:'magnifying-glass',click:this.refresh}
          ]
       }
     },
     mounted() {
       this.init()
     },
     methods: {
       ...mapActions('Article',['Publish','Edit']),
        ...mapActions('ArticleDetail',['GetArticleDetail']),
       ...mapMutations('Article',['SETPUBLISHSTATE']),
         getTitleLength(e) {
         let length=e.value.trimLeft().length
			this.titleLength = length
			this.title = e.value.trimLeft()
         this.title = common.filterSensitiveInfo(this.title)
	   	},
         upload(){
           if(this.$refs.coverImage){
            this.$refs.coverImage.click()
           }
         },
         //初始化
         init(){
  
           this.title = this.PublishData?.title
           this.type = this.PublishData?.type || 1
           this.cover = this.PublishData?.cover
         },
         //刷新文章封面
         refresh(){
            if(this.$refs.coverImage)
           this.$refs.coverImage.value="" 
           this.cover = null 
         },
         // 关闭裁剪图片组件
         showDown(){
             this.cropperShow = false
             this.$refs.coverImage.value=""    
         },
         //成功上传
         suceessUpload(imageUrl){
              this.cropperShow = false
              this.$refs.coverImage.value=""
              this.cover = imageUrl
         },

         onChange (e) {
            let file = e.target.files[0]
            if( ! this.beforeAvatarUpload(file))
            {
               this.$refs.coverImage.value=""        
            }
             this.croperImg = window.URL.createObjectURL(new Blob([file]));
             this.fileinfo = file
             this.cropperShow = true    
         },
         //上传视频前做一些限制
         beforeAvatarUpload(file) {

            const whiteList = ["image/jpeg", "image/png"];
            if (whiteList.indexOf(file.type) === -1) {
               this.$message.error('上传文件类型只能是 image/jpeg, image/png ');
               return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) this.$message.error('上传图片大小不能超过 5MB!');
            return isLt2M;
        },
        //发布
        async publish_(){
           if(this.title == '') return this.$message.error('标题不能为空')
           this.PublishData.title = this.title
           this.PublishData.type = this.type
           this.PublishData.createdUid=this.User?.uid
           this.PublishData.updateUid=this.User?.uid
           this.PublishData.cover = this.cover
            let image =this.PublishData.ImageUrls ? this.PublishData.ImageUrls[0] : null //上传的照片
            this.PublishData.createdCover =  this.cover || image || this.User?.headphoto   //设置封面
           
           let res 
           if(this.PublishType == 1)
            res = await this.Publish(this.PublishData)
           else res = await this.Edit(this.PublishData)
           if(res.code !=200) return this.$message.error(res.message)
          
           this.$message.success(res.message)
           if(this.PublishType == 2){
             let createdUid = this.User?.uid
             this.GetArticleDetail({id:this.PublishData?.id,createdUid})
           }
           this.SETPUBLISHSTATE({index:0,title:null})
        }
     },
  }
</script>
<style scoped lang='less'>
::v-deep .el-input__inner{
    background: rgba(255, 255, 255, 0.7);  
}

// 标题
.title{
   height: 40px;
   width: 45%;
    background: rgba(255, 255, 255, 0.7);
   border-radius: 5px;
   flex-wrap: nowrap;
   #titleInput {
		width: 90%;
		border: none;
		font-size: 15px;
      margin-right: 5px;
	}
}
.select{
     height: 40px;
     width: 45%;
}
//封面
.cover{
    margin: 5px 0;
   width: 100%;
   position: relative;
   height: 380px;
   overflow: auto;
    border-radius: 5px;
   background: rgba(255, 255, 255, 0.7);

   .produce{
      position: absolute;
      left: 10px;top: 10px;
   }
   .fun{
      position: absolute;
      right: 10px;top: 10px;

      .funOne{
         width: 15px;
         height: 15px;
         border-radius: 50%;
         padding: 7px;
         background: rgba(0, 0, 0,0.5);
         margin-bottom: 10px;
         color: white;
      }

   }

   .coverImage{

      object-fit: cover;
      
      width: 50%;
      max-width: 320px;
      min-width: 300px;
      height: 200px;
   }
   .upload{
      border: 1px solid var(--GeneralBackColor);
      border-radius: 5px;

       .uploadIcon{
         font-size: 50px;
         color: #C0C4CC;
       }
      .uploadText{
         width: 100%;
         text-align: center;
      }
   }

}

//发布按钮
#publicButton{
   margin: 0;
   width: 100%;
   border-radius: 25px;
   background: var(--GeneralBackColor);
   color: white;
}

</style>